<template>
  <div class="card">
    <div class="flex items-center">
      <div 
        class="flex-shrink-0 p-3 rounded-lg"
        :class="iconBgClass"
      >
        <i 
          :class="[icon, 'w-6 h-6 text-white']"
        />
      </div>
      <div class="ml-4 flex-1">
        <p class="text-sm font-medium text-gray-600">{{ title }}</p>
        <div class="flex items-baseline">
          <p v-if="!loading" class="text-2xl font-semibold text-gray-900">
            {{ formattedValue }}
          </p>
          <div v-else class="flex items-center">
            <div class="animate-pulse bg-gray-300 h-8 w-16 rounded"></div>
          </div>
          <span v-if="change && !loading" 
                :class="[
                  'ml-2 text-sm font-medium',
                  change > 0 ? 'text-green-600' : 'text-red-600'
                ]">
            <i :class="change > 0 ? 'mdi:trending-up' : 'mdi:trending-down'" />
            {{ Math.abs(change) }}%
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  title: string
  value: number | string
  icon: string
  color: 'blue' | 'green' | 'purple' | 'orange' | 'red'
  change?: number
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
})

const iconBgClass = computed(() => {
  const colorMap = {
    blue: 'bg-blue-500',
    green: 'bg-green-500',
    purple: 'bg-purple-500',
    orange: 'bg-orange-500',
    red: 'bg-red-500'
  }
  return colorMap[props.color]
})

const formattedValue = computed(() => {
  if (typeof props.value === 'number') {
    return props.value.toLocaleString()
  }
  return props.value
})
</script>